<template>
	<div class="flex justify-center items-center">
		<div class="mr-2">{{ appStore.lang }}:</div>
		<n-dropdown trigger="hover" :options="fontFamily" @select="handleFont">
			<div
				class="min-w-[68px] h-[40px] px-3 flex justify-center items-center rounded-lg cursor-pointer bg-bg-3 app-bg-react tmp-btn mr-2">
				{{ currentId }}
			</div>
		</n-dropdown>
	</div>

	<!-- <div
        class="min-w-[68px] h-[40px] px-3 flex justify-center items-center rounded-lg cursor-pointer bg-bg-3 app-bg-react tmp-btn mr-2"
        :class="{ active: item.id === currentId }"
        @click="handleFont(item)"
        v-for="(item, index) in fontFamily"
        :key="index">
        {{ item.id }} Fonts
    </div> -->
	Font weight
	<input
		value="14"
		class="tmp-input ml-2 flex-1 bg-bg-1 w-[70px] text-t-2 placeholder:text-t-2"
		v-model="inputVal"
		v-on:keyup="handleFontSize" />
</template>
<script lang="ts" setup>
import { NDropdown } from 'naive-ui'
import { useAppStore } from '@/store'
import { ref, computed } from 'vue'

const appStore = useAppStore()

const currentId = ref('Helvetica Neue')
const inputVal = ref(500)
const fontFamilyEn = [
	{
		key: 'Aeonik',
		label: 'Aeonik'
	},
	{
		key: 'PingFang SC',
		label: 'PingFang SC'
	},
	{
		key: 'Noto Sans',
		label: 'Noto Sans'
	},
	{
		key: 'Inter',
		label: 'Inter'
	},
	{
		key: 'Helvetica Neue',
		label: 'Helvetica Neue'
	},
	{
		key: 'Roboto',
		label: 'Roboto'
	},
	{
		key: 'Eudoxus Sans',
		label: 'Eudoxus Sans'
	},
	{
		key: 'SF Pro',
		label: 'SF Pro'
	}
]
const fontFamilyZh = [
	{
		key: 'Aeonik',
		label: 'Aeonik No Chinese'
	},
	{
		key: 'PingFang SC',
		label: 'PingFang SC'
	},
	{
		key: 'Noto Sans SC',
		label: 'Noto Sans SC'
	},
	{
		key: 'Inter',
		label: 'Inter No Chinese'
	},
	{
		key: 'Helvetica Neue',
		label: 'Helvetica Neue No Chinese'
	},
	{
		key: 'Roboto',
		label: 'Roboto No Chinese'
	},
	{
		key: 'Eudoxus Sans',
		label: 'Eudoxus Sans No Chinese'
	},
	{
		key: 'Hiragino Sans',
		label: 'Hiragino Sans'
	},
	{
		key: 'Microsoft YaHei',
		label: 'Microsoft YaHei'
	},
	{
		key: 'SF Pro',
		label: 'SF Pro'
	}
]
const fontFamily = computed(() => {
	let array
	if (appStore.lang === 'en') {
		array = fontFamilyEn
	} else if (appStore.lang === 'zh') {
		array = fontFamilyZh
	}
	return array
})

const handleFont = (key: string, obj: any) => {
	currentId.value = obj.label
	let body = document.getElementsByTagName('BODY')[0] as any
	// document.body.setAttribute('style', 'font-family:' + key)
	body.style.fontFamily = key
}
const handleFontSize = () => {
	let body = document.getElementsByTagName('BODY')[0] as any
	body.style.fontWeight = inputVal.value
	// document.body.setAttribute('style', 'font-weight:' + inputVal.value)
}
</script>
